<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./Tpl/css/bootstrap.min.css">
	<style type="text/css">
		#zhengtijuz{
			width: 1100px;

			margin: 0 auto;
			margin-top: 100px;
		}
		.zhuti{
			margin: 0 auto;
			margin-top: 100px;
			width: 1470px;
			height: 300px;
		}
		body #zhutixia{
			margin: 0 auto;
	
			width: 1470px;
			height: 100%;
			
		}
		.zhutixia{
			margin: 0 auto;
			margin-top: 170px;
			width: 500px;
			height: 500px;
			text-align: left;
			line-height: 15px;
		}
		.tex{
			width: 100%;
			height: 100%;
			margin-top: 20px;
		}
		.form-inline input{
			width: 220px;
			font-size: 16px;
			/* padding-top: 20px; */
		}
		.zhucbox{
			width: 500px;
			height: 45px;
			position: relative;
		}
		.info{
			display: block;
			position: absolute;
			top: 8px;
			left:230px;
		} 
	</style>
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">留言板</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
<div id="zhengtijuz">
   
    <div class="zhutixia">
    	<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注 册 账 号</h3>
      	<form class="form-inline reg" method="post" action="./enroll.php">
		  	<div class="form-group">
		    	<div class="zhucbox">
			    	<input type="text" class="form-control checkdata zongis" is-check='0' name="username" id="username" placeholder="               用 户 名" value="">
			    	<p class='info'></p>
		    	</div>
		    	
			    <div class="zhucbox">
			    	<input type="text" class="form-control checkdata zongis" is-check='0' name="email" placeholder="               E m a i l" value="">
			    	<p class='info'></p>
		    	</div>

		    	<div class="zhucbox">
			    	<input type="password" class="form-control checkdata password zongis" is-check='0' name="password" id="exampleInputName2" placeholder="                 密  码" value="">
			    	<p class='info'><!-- <span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>用户名可用 --></p>
		    	</div>
		    	
		    	<div class="zhucbox">
			    	<input type="password" class="form-control passwords zongis" is-check='0' name="passwords" placeholder="             确 认 密 码" value="">
			    	<p class='info'></p>
		    	</div>

		    	<div class="zhucbox">
			    	<input type="text" class="form-control" name="nikename" id="exampleInputName2" placeholder="                 昵  称" value="">
			    	<p class='info'><!-- <span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>用户名已存在 --></p>
		    	</div>
		    	
		  	</div>
			<input type="submit" class="btn btn-success" id='btn' disabled="" value="立即注册">
		</form>
    </div>
</div>	
</body>
	<script type="text/javascript" src='./Tpl/js/jquery.min.js'></script>
	<script type="text/javascript">
	$(function (){
		/*$('#username').blur(function() {
			username = $(this).val();
			objUser = $(this);
			$.ajax({
				url: './checkReg.php',
				type: 'POST',
				dataType: 'json',
				data: {username: username},
			})
			.done(function(data) {
				if (data.error==1) {
					objUser.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
				}else{
					objUser.siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
				}
			})
			.fail(function(data) {
				alert(7777);
			})
			
		});*/

		$('.checkdata').blur(function() {
			checkVal = $(this).val();   /*拿到每个类的值：如用户输入用户名就能拿到输入的用户名，输入密码拿到密码*/
			checkIndex = $(this).attr('name');  /*拿到每个input的name的值*/
			str = "checkData = {"+checkIndex+": checkVal}";    /*组成字符串checkData供异步data引用：里面两个值会变化 动态的组字符串*/

			/*str类似="a=2+4";*/
			eval(str);    /*eval把字符串当成JS代码来执行*/

			
			objUser = $(this);
			$.ajax({
				url: './checkReg.php',
				type: 'POST',
				dataType: 'json',
				data: checkData,
			})
			.done(function(data) {
				if (data.error==1) {
					objUser.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
					objUser.attr('is-check',0);
				}else{
					objUser.siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
					objUser.attr('is-check',1);
					pass();
				}
			})
			.fail(function(data) {
				alert(7777);
			})
			
		})	
			


		$('.passwords').blur(function(event) {
			passwords = $(this).val();
			password = $('.password').val();

			/*alert(passwords);
			alert(password);*/
			if (passwords==password && passwords!='') {
				$(this).siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+"密码一致");
				$(this).attr('is-check',1);
				pass();
			}else{
				$(this).siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+"密码不一致或为空");
				$(this).attr('is-check',0);
			}
		});
		

	})

	function pass(){
		num=0;
		for (var i = 0; i < $('.zongis').length; i++) {
			IS =$('.zongis').eq(i).attr('is-check');
			num+=parseInt(IS);
		};
		
		if (num==4) {
				$('#btn').attr('disabled',false);
			}

	}



	</script>
</html>